<template>
	<view class="">
		<view class="e-p-t-26 e-m-b-20">
			<view class="e-flex e-m-b-14 e-font-28">
				<text class="e-flex-1-1 c-333">{{$t('classify.配送服务')}}</text>
				<view class="e-flex" v-if="orderDeliveryfee">
					<text class="low-throw c-secondary e-m-r-10"
						v-if="orderVos.orderMoney >= gFig.fullDiscountPrice">{{$unitEn}}{{orderDeliveryfee + gFig.deliveryDeratePrice}}</text>
					<text class="c-333 fw-600">{{$unitEn}}{{orderDeliveryfee}}</text>
				</view>

				<view class="" v-else>
					<text>{{$t('classify.免配送费')}}</text>
				</view>
			</view>
			<view class="e-font-24 c-secondary" v-if="gFig.fullDiscountPrice">
				{{$t('classify.订单满')}} {{$unitEn}}{{gFig.fullDiscountPrice}} {{$t('classify.减配送费')}}
				{{$unitEn}}{{gFig.deliveryDeratePrice}}
			</view>
		</view>
		<view class="e-flex e-p-t-20 bg-white">
			<view class="e-flex-1-1 c-333 e-font-24 fw-600">
				{{$t('classify.配送时间')}}
			</view>
			<view class="e-flex" @tap="show = true">
				<view class="e-m-r-20" :style="{color: AppSkin.primary}">
					{{selectTime}} {{$t('cart.送达')}}
				</view>
				<app-image src="arrow_right.png" :size="['36rpx']" />
			</view>
		</view>


		<!-- 弹窗 -->
		<e-popup :show="show" round="20rpx" @close="close">
			<view class="nearby-store-address__popup">
				<view class="e-p-t-22 e-p-b-24 e-rela e-flex-xy-center">
					<text class="e-font-32 fw-500">{{ $t('cart.选择预计送达时间') }}</text>
					<image src="../../static/close.png" class="nearby-store-address__popup-icon img-28" @tap="close">
					</image>
				</view>
				<view class="nearby-store-address__popup-body e-flex e-flex-items-start">
					<view class="nearby-store-address__popup-day">
						<view class="e-flex-xy-center" v-for="(item,index) in dateList" :key="item.id"
							:class="{ 'bg-white': dateIndex === index }" @tap="setDayType(index)">
							{{item.name}}
						</view>

					</view>
					<view class="nearby-store-address__popup-time e-flex-1-1 bg-white">
						<scroll-view scroll-y="true" v-if="dateList[dateIndex]">
							<template v-if="receivingType === 3">
								<view class="nearby-store-address__popup-time__item e-flex e-flex-between"
									v-for="(item, index) in dateList[dateIndex].value" :key="index"
									@tap="timeIndex = index">
									<text :class="{ 'c-primary': timeIndex === index }">{{ item }}</text>
									<image src="/pages/systemPay/static/success.png" v-show="timeIndex === index"></image>
								</view>
							</template>
							<template v-else>
								<view class="nearby-store-address__popup-time__item e-flex e-flex-between"
									v-for="(item, index) in dateList[dateIndex].value1" :key="index"
									@tap="timeIndex = index">
									<text :class="{ 'c-primary': timeIndex === index }">{{ item }}</text>
									<image src="/pages/systemPay/static/success.png" v-show="timeIndex === index"></image>
								</view>
							</template>
						</scroll-view>
					</view>
				</view>
			</view>
		</e-popup>
	</view>
</template>

<script>
	export default {
		props: {
			orderVos: Object,
			orderDeliveryfee: Number,
			deliveryTimes: Array,
			receivingType: Number
		},
		data() {
			return {
				timeIndex: 0,
				show: false,
				dateList: [],
				dateIndex: 0,
				selectTime: '',
				gFig: {}
			}
		},
		watch: {
			orderVos: {
				handler(val) {
					if (val && val.fig) {
						const obj = JSON.parse(val.fig)
						if (obj) {
							this.gFig = obj
							this.initDate(obj)
						}

					}
				},
				immediate: true,
				deep: true
			},
			deliveryTimes: {
				handler(val) {
					if (val) {
						val.some(item => {
							if (item.storeId === this.orderVos.storeId) {
								this.selectTime = item.selectTime
								return true
							}
						})
					}
				},
				immediate: true,
				deep: true
			}
		},

		methods: {
			setDayType(index) {
				this.dateIndex = index
			},
			close() {
				this.show = false
				const time = this.receivingType === 3 ? this.dateList[this.dateIndex].value[this.timeIndex] : this
					.dateList[this.dateIndex].value1[this.timeIndex]
				this.selectTime = time
				const formmatDate = this.dateList[this.dateIndex].formmatDate
				const params = {
					deliveryTimes: formmatDate + " " + this.selectTime,
					storeId: this.orderVos.storeId,
					selectTime: this.selectTime
				}
				this.$emit('setDeliveryTime', params)
			},
			initDate(obj) {
				this.dateList = []
				let num = obj.daysInAdvance ? obj.daysInAdvance : 1

				for (let i = 0; i <= num; i++) {
					let name
					if (i === 0) {
						name = `${this.$t('cart.今天')}(${this.getWeek()})`
					} else if (i === 1) {
						name = `${this.$t('cart.明天')}(${this.getWeek(1)})`
					} else {
						name = `${this.getDateStr(i)}(${this.getWeek(i)})`
					}
					let weekIndex = this.getWeekIndex(i)
					// 闪送时间
					const timeArr = []
					let arr = []
					// 配送时间
					const timeArr1 = []
					let arr1 = []
					const now = new Date()
					// 延后时间
					const lagTime = obj.lagTime || 0
					const hours = new Date(now.setMinutes(now.getMinutes() + lagTime)).getHours()
					switch (weekIndex) {
						case 0:
							if (obj.deliveryType === 1) {
								// 闪送时间
								arr = obj.sunTimeSlot.split(',')
							} else {
								// 配送时间
								arr1 = obj.sunTimeSlots.split(',')
							}
							break
						case 1:
							if (obj.deliveryType === 1) {
								// 闪送时间
								arr = obj.monTimeSlot.split(',')
							} else {
								// 配送时间
								arr1 = obj.monTimeSlots.split(',')
							}
							break
						case 2:
							if (obj.deliveryType === 1) {
								// 闪送时间
								arr = obj.tueTimeSlot.split(',')
							} else {
								// 配送时间
								arr1 = obj.tueTimeSlots.split(',')
							}
							break
						case 3:
							if (obj.deliveryType === 1) {
								// 闪送时间
								arr = obj.wedTimeSlot.split(',')
							} else {
								// 配送时间
								arr1 = obj.wedTimeSlots.split(',')
							}
							break
						case 4:
							if (obj.deliveryType === 1) {
								// 闪送时间
								arr = obj.thuTimeSlot.split(',')
							} else {
								// 配送时间
								arr1 = obj.thuTimeSlots.split(',')
							}
							break
						case 5:
							if (obj.deliveryType === 1) {
								// 闪送时间
								arr = obj.friTimeSlot.split(',')
							} else {
								// 配送时间
								arr1 = obj.friTimeSlots.split(',')
							}
							break
						case 6:
							if (obj.deliveryType === 1) {
								// 闪送时间
								arr = obj.satTimeSlot.split(',')
							} else {
								// 配送时间
								arr1 = obj.satTimeSlots.split(',')
							}
							break
					}
					// 闪送时间
					arr.forEach(item => {
						if (!i) {
							if (item > hours) {
								timeArr.push(item + ":" + "00")
							}
						} else {
							timeArr.push(item + ":" + "00")
						}
					})
					// 配送时间
					arr1.forEach(item => {
						if (!i) {
							const _t = item.split('-')
							const startHours = _t[0].split(":")
							if (hours >= startHours[0]) return
							timeArr1.push(item)
						} else {
							timeArr1.push(item)
						}
					})
					this.dateList.push({
						id: new Date().getTime() + Math.random(),
						value: timeArr,
						value1: timeArr1,
						formmatDate: this.getFormmatDate(i),
						name
					})
				}
				if (this.receivingType === 3) {
					const notValueIndex = this.dateList.findIndex(item => !item.value.length)
					if (notValueIndex >= 0) {
						this.dateList.splice(notValueIndex, 1)
					}
				} else {
					const notValueIndex1 = this.dateList.findIndex(item => !item.value1.length)
					if (notValueIndex1 >= 0) {
						this.dateList.splice(notValueIndex1, 1)
					}
				}

				if (this.dateList?.length) {
					// 初始化赋值
					const formmatDate = this.dateList[this.dateIndex].formmatDate
					if (this.receivingType === 3) {
						this.selectTime = this.dateList[0].value[0]
					} else {
						this.selectTime = this.dateList[0].value1[0]
					}
					const params = {
						deliveryTimes: formmatDate + " " + this.selectTime,
						storeId: this.orderVos.storeId,
						selectTime: this.selectTime
					}
					this.$emit('setDeliveryTime', params)
				}

			},
			getFormmatDate(AddDayCount = 0) {
				const dd = new Date();
				dd.setDate(dd.getDate() + AddDayCount);
				const y = dd.getFullYear()
				const m = (dd.getMonth() + 1) < 10 ? "0" + (dd.getMonth() + 1) : (dd.getMonth() + 1);
				const d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();

				return y + "-" + m + "-" + d;
			},
			getDateStr(AddDayCount = 0) {
				const dd = new Date();
				dd.setDate(dd.getDate() + AddDayCount);
				const m = (dd.getMonth() + 1) < 10 ? "0" + (dd.getMonth() + 1) : (dd.getMonth() + 1);
				const d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();

				return m + "/" + d;
			},
			getWeek(AddDayCount = 0) {
				const dd = new Date();
				dd.setDate(dd.getDate() + AddDayCount);
				const index = dd.getDay()
				const weeks = [this.$t('cart.周日'), this.$t('cart.周一'), this.$t('cart.周二'), this.$t('cart.周三'), this.$t(
					'cart.周四'), this.$t('cart.周五'), this.$t('cart.周六')]
				return weeks[index]
			},
			getWeekIndex(AddDayCount = 0) {
				const dd = new Date();
				dd.setDate(dd.getDate() + AddDayCount);
				const index = dd.getDay()
				return index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nearby-store-address {
		padding: 32rpx 20rpx 22rpx 20rpx;

		&__icon {
			padding: 0 4rpx;
		}

		&__time {
			padding-right: 30rpx;
			position: relative;

			&::after {
				content: '';
				height: calc(100% - 20rpx);
				width: 2rpx;
				background-color: #e6e6e6;
				position: absolute;
				right: 0;
				top: 10rpx;
			}
		}

		&__add {
			overflow: hidden;
			padding-left: 28rpx;
		}

		&__popup {
			height: 60vh;

			&-icon {
				position: absolute;
				right: 20rpx;
				top: 32rpx;
			}

			&-body {
				border-top: 2rpx solid #e2e2e2;
				background: #f7f7f7;
			}

			&-day {
				flex: 0 0 256rpx;
				height: calc(60vh - 50px);
				overflow-y: auto;

				>view {
					height: 94rpx;
				}
			}

			&-time {
				scroll-view {
					height: calc(60vh - 50px);
				}

				&__item {
					padding: 0 20rpx 0 22rpx;
					height: 94rpx;

					image {
						width: 22rpx;
						height: 18rpx;
					}
				}
			}
		}
	}

	.low-throw {
		text-decoration: line-through;
	}
</style>